<template>
  <el-upload
    v-bind="$attrs"
    :show-file-list="listType !== 'avatar'"
    :on-success="handleFileSuccess"
    :on-error="handleFileError"
    :on-remove="handleFileRemove"
    :on-preview="handlePreview"
    :headers="headers"
    :limit="fileLimit"
    :file-list="fileList"
    :action="fileUploadUrl"
    :disabled="!editable"
    :drag="editable && listType === 'drag'"
    multiple
    class="avatar-uploader"
    v-on="$listeners">
    <template v-if="listType === 'list'">
      <el-button v-if="editable" size="small" type="primary">选取文件</el-button>
    </template>
    <template v-else-if="listType === 'avatar'">
      <img v-if="avatarUrl" :src="avatarUrl" :width="avatarWidth" :height="avatarHeight">
      <template v-else>
        <i v-if="editable" class="el-icon-plus avatar-uploader-icon" />
      </template>
    </template>
    <template v-else>
      <i v-if="editable" class="el-icon-upload" />
      <div v-if="editable" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
      <div v-if="editable" slot="tip" class="el-upload__tip">
        最能上传{{ fileLimit }}个文件
        <el-button v-if="templatePath !== ''" type="text" @click="downloadTemplate">模板下载</el-button>
      </div>
    </template>
  </el-upload>
</template>

<script>
import { fileDirectUploadUrl, fileUploadUrl, displayImageUrl, downloadAttachment, downloadSysAttachment } from '@/api/system/fileMng'
import { getToken } from '@/utils/auth'
import { getFileExtension } from '@/utils'

export default {
  components: { },
  props: {
    sup_this: {
      type: Object,
      default: null,
      required: true
    },
    editable: {
      type: Boolean,
      default: true,
      required: false
    },
    fileLimit: {
      type: Number,
      default: 1,
      required: false
    },
    isDirectUpload: {
      type: Boolean,
      default: true,
      required: false
    },
    listType: {
      type: String,
      default: 'drag', // list, avatar
      required: false
    },
    avatarWidth: {
      type: String,
      default: '120px',
      required: false
    },
    avatarHeight: {
      type: String,
      default: '120px',
      required: false
    }
  },
  data() {
    return {
      headers: {
        'X-AUTH-TOKEN': getToken()
      },
      fileUploadUrl: this.isDirectUpload ? fileDirectUploadUrl() : fileUploadUrl(),
      templatePath: '',
      fileList: [],
      avatarUrl: ''
    }
  },
  created() {
  },
  mounted() {
    this.fileList = []
    this.$emit('afterMounted')
  },
  methods: {
    getFileList() {
      return this.fileList
    },
    setFileList(val) {
      this.fileList = val
      if (this.listType === 'avatar' && val && val.length > 0) {
        this.avatarUrl = displayImageUrl(val[0].filePath)
      }
    },
    handleFileSuccess(res, file, fileList) {
      if (res.code !== '1000') {
        this.$notify({
          title: '上传失败:' + res.msg,
          type: 'error',
          duration: 2500
        })
        this.handleFileRemove(file, fileList)
        return
      }
      const sysAttachment = res.data
      sysAttachment.uid = file.uid
      if (this.listType === 'avatar') {
        this.avatarUrl = displayImageUrl(sysAttachment.filePath)
        const tmpList = []
        tmpList.push(sysAttachment)
        this.fileList = tmpList
      } else {
        this.fileList.push(sysAttachment)
      }
      this.$emit('fileUploadSuccess', sysAttachment)
    },
    handlePreview(file) {
      const exportFileName = file.fileName || (Date.parse(new Date()) + file.fileType)
      if (this.isDirectUpload) {
        downloadAttachment(file.filePath, exportFileName)
      } else {
        downloadSysAttachment(this.templatePath, exportFileName)
      }
    },
    handleFileRemove(file, fileList) {
      this.fileList = this.fileList.filter(t => t.uid !== file.uid)
      this.$emit('fileRemoveSuccess', file)
    },
    // 监听上传失败
    handleFileError(e, file, fileList) {
      const msg = e.msg || e
      this.$notify({
        title: msg,
        type: 'error',
        duration: 2500
      })
    },
    downloadTemplate() {
      if (this.templatePath) {
        const exportFileName = Date.parse(new Date()) + getFileExtension(this.templatePath)
        downloadSysAttachment(this.templatePath, exportFileName)
      }
    }
  }
}
</script>
